<template>
  <el-card class="hotel-search">
    <h2>预定酒店</h2>
    <el-form label-position="top">
      <div style="width: 74vh;height: 85px;background-color: #fff;border-radius: 10px;">
        <div class="form-group">
          <el-form-item label="目的地" style="width: 150px">
            <el-input v-model="searchFormResult.city"></el-input>
          </el-form-item>
        </div>
        <div class="form-group">
          <el-form-item label="入住日期">
            <el-date-picker
                type="datetimerange"
                range-separator="至"
                start-placeholder="入住日期"
                end-placeholder="退房日期"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
                v-model="times"
            ></el-date-picker>
          </el-form-item>
        </div>
      </div>
      <div style="display: flex">
        <div style="width: 75vh;height: 85px;background-color: #fff;border-radius: 10px;display: inline-block;margin-top: 30px">
          <el-row :gutter="5">
            <el-col :span="8">
              <div class="form-group">
                <el-form-item label="房间数量">
                  <el-input-number v-model="searchFormResult.room" :min="1" :max="10"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="form-group">
                <el-form-item label="住客人数">
                  <el-input-number v-model="searchFormResult.person" :min="1" :max="10"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="form-group">
                <el-form-item label="酒店级别">
                  <el-select style="width: 150px" v-model="searchFormResult.type">
                    <el-option label="不限" value="00"></el-option>
                    <el-option label="星级" value="10"></el-option>
                    <el-option label="民宿" value="20"></el-option>
                    <el-option label="公寓" value="30"></el-option>
                    <el-option label="快捷酒店" value="40"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="form-group">
          <button type="button" @click="search"><el-icon><Search /></el-icon>搜索</button>
        </div>
      </div>
    </el-form>
  </el-card>
  <div class="hotel-search-result">
    <el-card style="width: 100%;margin-top: 10px" v-for="h in hotelList">
      <el-row>
        <el-col :span="6">
          <img :src="h.imgUrl" style="width: 200px;">
        </el-col>
        <el-col :span="12">
          <span style="font-size: 25px;font-weight: bold">{{h.hotelName}}</span>
          <br>
          <div style="color: #000;font-size: 20px;margin-top: 10px"><el-icon><Location /></el-icon>{{h.address}}</div>
          <div style="color: #ff7700;font-size: 15px;margin-top: 10px">{{h.description}}</div>
        </el-col>

        <el-col :span="6" style="text-align: right">
          <el-rate
              v-model="h.lvcard"
              disabled
              text-color="#ff9900"
          />
          <div style="color:#4978ce;margin-bottom:10px">
            <span class="spanPfen">{{h.lvcard}}/5</span>
            <div v-if="h.lvcard >= 3">棒</div>
            <div v-else>体验良好</div>
          </div>
          <div style="color: #007BFF;font-size: 20px;margin-top: 10px">￥{{h.price}}<span style="font-size: 15px;color: #000">起</span></div>
          <el-button type="primary" style="font-size: 16px;width: 80px;height: 35px" @click="hotelDetail(h.id)">查看详情</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>

</template>

<script setup>
import {onMounted,ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

// 定义一个响应式对象来存储从路由参数中读取的表单数据
const searchFormResult = ref({
  city: '',
  type: '',
  room:'',
  person:''
});
const times = ref([]);
// 在组件挂载时读取 Local Storage 中的表单数据
onMounted(() => {
  const storedForm = localStorage.getItem('searchFormResult');
  if (storedForm) {
    searchFormResult.value = JSON.parse(storedForm);
    times.value[0] = searchFormResult.value.checkinDate;
    times.value[1] = searchFormResult.value.checkoutDate;
  }
  search();
});

const search = () => {
  searchFormResult.value.checkinDate = times.value[0];
  searchFormResult.value.checkoutDate = times.value[1];
  console.log(searchFormResult.value);
  // 将表单数据存储到 Local Storage 中
  localStorage.setItem('roomSearch', JSON.stringify(searchFormResult.value));
  const storedForm = localStorage.getItem('roomSearch');
  console.log(storedForm)
  //查询对应条件的酒店
  let data = qs.stringify(searchFormResult.value);
  axios.get(BASE_URL+'/v1/hotel/select?'+data)
      .then((response)=>{
        if (response.data.code===2000){
          hotelList.value = response.data.data;
          //通过酒店id获取各酒店最低的房间价格
          for (let i = 0; i < hotelList.value.length; i++) {
            axios.get(BASE_URL+'/v1/room/selectMinPrice/'+hotelList.value[i].id)
                .then((response)=>{
                  if (response.data.code===2000){
                    hotelList.value[i].price = response.data.data[0].minPrice;
                  }else{
                    ElMessage.error(response.data.msg);
                  }
                })
          }
        }else{
          ElMessage.error(response.data.msg);
        }
      })
};

//根据搜索条件查询出来的酒店
const hotelList = ref([]);

//查看对应酒店详情
const hotelDetail = (id) => {
  console.log(id);
  router.push('hotel?hotelId='+id);
}

</script>

<style scoped>
.hotel-search {
  width: 130vh;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-image: url("../../../public/imgs/login.jpg");
  background-size: cover;
}

.hotel-search h2 {
  text-align: left;
  margin-bottom: 20px;
  color: #fff;
}

.form-group {
  margin: 15px;
  display: inline-block;
}

.form-group button {
  width: 110px;
  height: 85px;
  padding: 12px;
  margin-top: 15px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 20px;
  transition: background-color 0.3s ease;
}

.hotel-search-result {
  width: 130vh;
  margin: 20px auto;
  padding: 10px;
  border-radius: 10px;
  background-color: #fff;
}
.spanPfen{
  display: inline-block;
  width: 50px;
  height: 30px;
  background: #4978ce;
  color: #fff;
  text-align: center;
  line-height: 30px;
  border-radius: 5px;
  margin-right: 10px;
}
</style>